<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css"/>
    <script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/DatePicker.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#datepicker").datepicker({
                //inline:true,
                changeMonth: true, //在日期的标题栏中是否出现下拉选择框，选择日期中的月份。true代表有选择框，false代表无选择框
                changeYear: false, //在日期的标题栏中是否出现下拉选择框，选择日期中的年份。true代表有选择框，false代表无选择框
                showButtonPanel: true,  //在日期面板的下方出现两个按钮，一个是今天，一个是关闭。默认值是false,不显示的
                closeText: "关闭",  //必须结合showButtonPanel使用，并且showButtonPanel的值必须是true，否则看不到效果
                dateFormat: "yy-mm-dd",  //表示日期显示的格式
                defaultDate: -3,  //缺省值在当前日期中加或减几天
                showAnim: "toggle",  //日期界面出现的动画效果
                showWeek: true,    //显示周  当前中的第几周
                firstDay: 1,   //默认firstDay 当前的第一天
                yearRange: "1970:2021",   //表示下拉框中年份的范围
                onSelect: function (selectedDate) {
                    //alert(selectedDate);
                    //获取当前对象this.id=dp minDate  //开始日期的最小值
                    //获取 option的值是minDat或者是maxDate  根据dom对象的
                    var option = this.id == "dp" ? "minDate" : "maxDate",
                        //获取当前日期的实例对象，每遍历一次就获取一次
                        instance = $(this).data("datepicker"),
                        //获取日期   instance.settings 获取日期的值
                        date = $.datepicker.parseDate(
                            instance.settings.dateFormat ||
                            $.datepicker._defaults.dateFormat,
                            selectedDate, instance.settings);
                    //设置日期
                    dates.not(this).datepicker("option", option, date);
                }
            });
        });
    </script>
    <title>花礼网-商品修改</title>
    <style type="text/css">
        #box li{
            width: 100px;
            height: 100px;
            border: 1px solid #858585;
            list-style: none;
            float: left;
            margin: 3px;
        }
        .imgshow{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="row" style="margin-left: 20px;">
    <form action="${pageContext.request.contextPath }/updateGoodsById" method="post" enctype="multipart/form-data">
        <div class="row">
            <div class="col-sm-6">
                <p style="color:red">${msg}</p>
                <div class="form-group form-inline">
                    <label>名称:</label>
                    <input type="text" name="name" class="form-control" value="${goods.name}"/>
                </div>
                <div class="form-group form-inline">
                    <label>分类:</label>
                    <select name="typeName" class="form-control">
                        <option value="0">---请选择商品类型---</option>
                        <c:forEach items="${gtlist}" var="t">
                            <c:if test="${t.name eq goods.typeName}">
                                <option value="${t.name}" selected>${t.name}</option>
                            </c:if>
                            <option value="${t.name}">${t.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="form-group form-inline">
                    <label>时间:</label>
                    <p><input type="text" id="datepicker" name="pubdate" value="${goods.pubdate}"/></p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group form-inline">
                    <label>价格:</label>
                    <input type="text" name="price" class="form-control" value="${goods.price}"/> 元
                </div>
                <div class="form-group form-inline">
                    <label>评分:</label>
                    <input type="text" name="star" class="form-control" value="${goods.star}"/>
                </div>
                <div class="form-group form-inline">
                    <label>编号:</label>
                    <input type="text" name="id" class="form-control" value="${goods.id}"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">

                <div class="form-group">
                    <label>商品图片</label>
                    <div id="box">
                        <!--
                                <li><img class="imgshow" src="" alt=""/></li>
                                <li><img class="imgshow" src="" alt=""/></li> -->
                    </div>
                    <input type="file" name="file" multiple  id="filed" style="width: 75px;overflow: hidden"/>
                </div>
                <div class="form-group" style="margin-top: 100px">
                    <label>商品简介</label>
                    <textarea id="textarea" name="intro" class="form-control" rows="3" ></textarea>
                </div>
                <div class="form-group form-inline">
                    <input type="submit" value="修改" class="btn btn-primary"/>
                    <input type="reset" value="重置" class="btn btn-default"/>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    //textarea默认内容   textarea不能直接使用value设置
    document.getElementById("textarea").value="${goods.intro}"
    //一进去就显示图片
    $(function(){
        $('#box').append("<li><img class='imgshow' src='${pageContext.request.contextPath }/image/${goods.picture}' alt=''/></li>");
        var ss='${goods.picture}'
        var date=ss.slice(0,6);
        for (var i=1;i<4;i++){
            $('#box').append("<li><img class='imgshow' src='${pageContext.request.contextPath }/image/"+date+"/${goods.id}-"+(i+1)+".jpg' alt=''/></li>");
        }
    })
    //修改图片
    $('#filed').change(function(){
        var files=$('#filed').get(0).files;
        $("#box").empty();
        for(var i=0;i<files.length;i++){
            var file = $('#filed').get(0).files[i];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(e){
                console.log(e);
                $('#box').append("<li><img class='imgshow' src='"+e.target.result+"' alt=''/></li>")
            }
        }

    })
</script>
</body>
</html>